document.addEventListener('DOMContentLoaded', () => {
  // Sidebar navigation active state tracking
  const sections = document.querySelectorAll('.section');
  const navLinks = document.querySelectorAll('.nav-link');

  window.addEventListener('scroll', () => {
    let current = '';
    sections.forEach(section => {
      const sectionTop = section.offsetTop;
      if (pageYOffset >= sectionTop - 150) {
        current = section.getAttribute('id');
      }
    });

    navLinks.forEach(link => {
      link.classList.remove('active');
      if (link.getAttribute('href') === `#${current}`) {
        link.classList.add('active');
      }
    });
  });

  // Inline Pipeline Step Inspector
  const pipelineNodes = document.querySelectorAll('.pipeline-node');
  pipelineNodes.forEach(node => {
    node.addEventListener('click', (e) => {
      // Toggle active class on clicked node
      const isActive = node.classList.contains('active');
      
      // Close all other node details inline
      pipelineNodes.forEach(n => {
        if (n !== node) {
          n.classList.remove('active');
          const detailsEl = n.querySelector('.node-inline-details');
          if (detailsEl) detailsEl.style.display = 'none';
        }
      });

      if (!isActive) {
        node.classList.add('active');
        const detailsEl = node.querySelector('.node-inline-details');
        if (detailsEl) detailsEl.style.display = 'block';
      } else {
        node.classList.remove('active');
        const detailsEl = node.querySelector('.node-inline-details');
        if (detailsEl) detailsEl.style.display = 'none';
      }
    });
  });

  // Interactive Entropy & Alpha Simulator
  const hDenseInput = document.getElementById('h-dense-slider');
  const hSparseInput = document.getElementById('h-sparse-slider');
  const hDenseVal = document.getElementById('h-dense-val');
  const hSparseVal = document.getElementById('h-sparse-val');
  const alphaDisplay = document.getElementById('alpha-display');
  const bm25Percent = document.getElementById('bm25-percent');
  const densePercent = document.getElementById('dense-percent');
  const bm25Bar = document.getElementById('bar-bm25');
  const denseBar = document.getElementById('bar-dense');
  const systemStateText = document.getElementById('system-state-text');

  function updateAlphaSimulator() {
    if (!hDenseInput || !hSparseInput) return;
    const hDense = parseFloat(hDenseInput.value);
    const hSparse = parseFloat(hSparseInput.value);

    hDenseVal.textContent = hDense.toFixed(2);
    hSparseVal.textContent = hSparse.toFixed(2);

    const epsilon = 1e-8;
    const alpha = hDense / (hDense + hSparse + epsilon);
    const bm25Pct = (alpha * 100).toFixed(1);
    const densePct = ((1 - alpha) * 100).toFixed(1);

    alphaDisplay.textContent = alpha.toFixed(3);
    bm25Percent.textContent = `${bm25Pct}%`;
    densePercent.textContent = `${densePct}%`;

    bm25Bar.style.width = `${bm25Pct}%`;
    denseBar.style.width = `${densePct}%`;

    if (alpha > 0.6) {
      systemStateText.innerHTML = `<strong>High FAISS Uncertainty:</strong> System automatically trusts <strong>BM25 Lexical Search</strong> for keyword precision.`;
    } else if (alpha < 0.4) {
      systemStateText.innerHTML = `<strong>High BM25 Uncertainty:</strong> System automatically trusts <strong>FAISS Vector Search</strong> for semantic meaning.`;
    } else {
      systemStateText.innerHTML = `<strong>Balanced Confidence:</strong> Equal weighting between lexical keywords and vector semantics.`;
    }
  }

  if (hDenseInput && hSparseInput) {
    hDenseInput.addEventListener('input', updateAlphaSimulator);
    hSparseInput.addEventListener('input', updateAlphaSimulator);
    updateAlphaSimulator();
  }

  // Code Accordion Toggle
  const accordionHeaders = document.querySelectorAll('.accordion-header');
  accordionHeaders.forEach(header => {
    header.addEventListener('click', () => {
      const item = header.parentElement;
      item.classList.toggle('open');
    });
  });

  // Codebase Function Filter Search
  const searchInput = document.getElementById('code-search');
  const accordionItems = document.querySelectorAll('.accordion-item');

  if (searchInput) {
    searchInput.addEventListener('input', (e) => {
      const query = e.target.value.toLowerCase();
      accordionItems.forEach(item => {
        const text = item.textContent.toLowerCase();
        if (text.includes(query)) {
          item.style.display = 'block';
          if (query.length > 2) {
            item.classList.add('open');
          }
        } else {
          item.style.display = 'none';
        }
      });
    });
  }

  // =========================================================================
  // ORIGINAL HYBRID RETRIEVAL ENGINE & EXPANDED CS/SCIENCE CORPUS
  // =========================================================================

  const sampleCorpus = [
    // Computer Science & AI Documents
    {
      id: "CS-101",
      title: "Transformer Architectures and Multi-Head Self-Attention",
      text: "Transformer models rely on multi-head self-attention mechanisms to compute pairwise token interactions in parallel. Positional encodings provide sequence order information without recurrent loops."
    },
    {
      id: "CS-102",
      title: "Distributed Consensus Algorithms: Raft and Paxos",
      text: "Distributed consensus algorithms ensure state machine replication consistency across faulty nodes. Raft simplifies leader election, log replication, and safety dynamics compared to classical Paxos."
    },
    {
      id: "CS-103",
      title: "Operating System Virtual Memory & Page Fault Handling",
      text: "Virtual memory maps process virtual address space to physical RAM using page tables and Translation Lookaside Buffers (TLB). Page faults trigger kernel interrupts to load missing pages from secondary storage."
    },
    {
      id: "CS-104",
      title: "Deep Reinforcement Learning & Q-Function Approximators",
      text: "Deep Q-Networks (DQN) combine Q-learning with deep neural networks to approximate optimal action-value functions in high-dimensional state spaces using experience replay buffers."
    },
    {
      id: "CS-105",
      title: "Zero-Knowledge Proofs & Cryptographic Privacy",
      text: "Zero-Knowledge Succinct Non-Interactive Arguments of Knowledge (zk-SNARKs) allow a prover to demonstrate validity of a computation to a verifier without revealing private input data."
    },
    {
      id: "CS-106",
      title: "Database Query Optimization & B-Tree Indexing",
      text: "Database storage engines use B+ Trees and LSM Trees for fast indexing. Cost-based query optimizers estimate execution plan costs using catalog statistics and index selectivity."
    },
    {
      id: "CS-107",
      title: "Quantum Computing & Superposition Dynamics",
      text: "Quantum bits (qubits) leverage superposition and quantum entanglement to evaluate complex computational states simultaneously, offering exponential speedups for integer factorization and molecular simulations."
    },
    {
      id: "CS-108",
      title: "Compiler Optimization & Intermediate Representations",
      text: "Modern compilers translate source code into Static Single Assignment (SSA) intermediate representation to perform dead code elimination, loop vectorization, and register allocation."
    },
    {
      id: "CS-109",
      title: "Microservices Architecture & API Gateways",
      text: "Microservices architectures decouple monolithic applications into independently deployable services that communicate via lightweight REST or gRPC APIs managed by edge API gateways."
    },
    {
      id: "CS-110",
      title: "Computer Networks: BGP Routing and Congestion Control",
      text: "Border Gateway Protocol (BGP) manages inter-domain routing across autonomous systems on the Internet, while TCP Cubic and BBR govern window-based congestion control."
    },
    // Biomedical & Science Documents
    {
      id: "BIO-201",
      title: "Biomaterial dimensionality and inductive properties",
      text: "0-dimensional biomaterials show inductive properties in bone tissue engineering. Nanoparticle delivery systems enhance localized osteoinduction through targeted cell membrane interactions."
    },
    {
      id: "BIO-202",
      title: "MicroRNA regulation in cell proliferation",
      text: "MicroRNA-21 regulates cellular proliferation and apoptosis in human tumor cells by targeting PTEN pathways and modulating downstream AKT phosphorylation."
    },
    {
      id: "BIO-203",
      title: "CRISPR-Cas9 genomic editing specificity",
      text: "Engineered Cas9 variants significantly reduce off-target cleavage events in human pluripotent stem cells without compromising high-efficiency on-target genome modification."
    },
    {
      id: "BIO-204",
      title: "Graphene oxide scaffolds in tissue repair",
      text: "Three-dimensional graphene oxide scaffolds promote electrical conductivity and neural stem cell differentiation in spinal cord injury regeneration models."
    },
    {
      id: "BIO-205",
      title: "Single-cell RNA sequencing of tumor microenvironments",
      text: "Single-cell transcriptomics reveals heterogeneous immune cell infiltration profiles and distinct macrophage polarization states in non-small cell lung carcinoma."
    }
  ];

  function stem(word) {
    if (word.length <= 3) return word;
    if (word.endsWith('ing')) return word.slice(0, -3);
    if (word.endsWith('ies')) return word.slice(0, -3) + 'y';
    if (word.endsWith('es')) return word.slice(0, -2);
    if (word.endsWith('s') && !word.endsWith('ss')) return word.slice(0, -1);
    if (word.endsWith('ed')) return word.slice(0, -2);
    if (word.endsWith('ization')) return word.slice(0, -7);
    return word;
  }

  function tokenize(text) {
    return text.toLowerCase().replace(/[^\w\s]/g, ' ').split(/\s+/).filter(w => w.length > 1).map(stem);
  }

  function computeBM25(queryTokens, docTokens, avgdl, N, dfMap) {
    const k1 = 1.5;
    const b = 0.75;
    const docLen = docTokens.length;
    let score = 0.0;

    const termCounts = {};
    docTokens.forEach(t => termCounts[t] = (termCounts[t] || 0) + 1);

    queryTokens.forEach(token => {
      if (termCounts[token]) {
        const tf = termCounts[token];
        const df = dfMap[token] || 1;
        const idf = Math.log((N - df + 0.5) / (df + 0.5) + 1.0);
        const denom = tf + k1 * (1.0 - b + b * (docLen / avgdl));
        score += idf * ((tf * (k1 + 1.0)) / denom);
      }
    });

    return score;
  }

  function computeDenseSim(queryTokens, docTokens) {
    const setA = new Set(queryTokens);
    const setB = new Set(docTokens);
    let intersection = 0;
    setA.forEach(t => { if (setB.has(t)) intersection++; });
    const jaccard = intersection / Math.max(1, setA.size + setB.size - intersection);
    
    // Semantic score matching
    if (jaccard > 0) {
      return Math.min(0.98, 0.45 + jaccard * 0.55);
    }
    return 0.05; // Low background baseline
  }

  function computeShannonEntropy(scores) {
    if (scores.length <= 1) return 0.0;
    const total = scores.reduce((a, b) => a + Math.max(0.0001, b), 0);
    let entropy = 0.0;
    scores.forEach(s => {
      const p = Math.max(0.0001, s) / total;
      entropy -= p * Math.log2(p);
    });
    return Math.max(0.0, entropy);
  }

  function minMaxNormalize(arr) {
    const min = Math.min(...arr);
    const max = Math.max(...arr);
    if (max - min < 1e-8) return arr.map(() => 0.5);
    return arr.map(v => (v - min) / (max - min));
  }

  function cdfNormalize(arr) {
    const sorted = [...arr].sort((a, b) => a - b);
    return arr.map(v => {
      let idx = 0;
      while (idx < sorted.length && sorted[idx] <= v) idx++;
      return idx / sorted.length;
    });
  }

  const runDemoBtn = document.getElementById('run-demo-btn');
  const demoQueryInput = document.getElementById('demo-query-input');
  const demoModeSelect = document.getElementById('demo-mode-select');
  const demoResultsContainer = document.getElementById('demo-results-container');
  const demoTelemetryBox = document.getElementById('demo-telemetry-box');

  if (runDemoBtn && demoQueryInput && demoModeSelect && demoResultsContainer) {
    runDemoBtn.addEventListener('click', () => {
      const startTime = performance.now();
      const queryText = demoQueryInput.value.trim();
      const mode = demoModeSelect.value;

      if (!queryText) return;

      const qTokens = tokenize(queryText);
      const N = sampleCorpus.length;
      let totalTokens = 0;
      const dfMap = {};

      const tokenizedCorpus = sampleCorpus.map(doc => {
        const tokens = tokenize(`${doc.title} ${doc.text}`);
        totalTokens += tokens.length;
        const unique = new Set(tokens);
        unique.forEach(t => dfMap[t] = (dfMap[t] || 0) + 1);
        return { doc, tokens };
      });

      const avgdl = totalTokens / N;

      // Compute raw scores BEFORE any normalization
      const rawSparse = tokenizedCorpus.map(item => computeBM25(qTokens, item.tokens, avgdl, N, dfMap));
      const rawDense = tokenizedCorpus.map(item => computeDenseSim(qTokens, item.tokens));

      // ── RAW SIGNAL CONFIDENCE CHECK (pre-normalization) ──
      // Check the BEST raw scores across the entire corpus.
      // If no document has meaningful lexical overlap (BM25 ~ 0) AND
      // no document has semantic overlap (dense stuck at baseline 0.05),
      // then the query is out-of-domain and ALL results are garbage.
      const maxRawBM25 = Math.max(...rawSparse);
      const maxRawDense = Math.max(...rawDense);
      const DENSE_BASELINE = 0.06; // anything at or below 0.05 means zero token overlap
      const BM25_MIN_SIGNAL = 0.5; // at least one meaningful term match needed
      const isLowConfidence = (maxRawBM25 < BM25_MIN_SIGNAL) && (maxRawDense <= DENSE_BASELINE);

      let finalResults = [];
      let alpha = 0.5;
      let hSparse = 0.0;
      let hDense = 0.0;
      let reranked = false;

      if (mode === 'dense') {
        finalResults = sampleCorpus.map((doc, i) => ({ doc, score: rawDense[i], rawBM25: rawSparse[i], rawDense: rawDense[i] }));
      } else if (mode === 'sparse') {
        finalResults = sampleCorpus.map((doc, i) => ({ doc, score: rawSparse[i], rawBM25: rawSparse[i], rawDense: rawDense[i] }));
      } else if (mode === 'rrf') {
        const sparseRanks = [...rawSparse.keys()].sort((a, b) => rawSparse[b] - rawSparse[a]);
        const denseRanks = [...rawDense.keys()].sort((a, b) => rawDense[b] - rawDense[a]);
        const rrfScores = Array(N).fill(0.0);

        sparseRanks.forEach((docIdx, rank) => { rrfScores[docIdx] += 1.0 / (60 + rank + 1); });
        denseRanks.forEach((docIdx, rank) => { rrfScores[docIdx] += 1.0 / (60 + rank + 1); });

        finalResults = sampleCorpus.map((doc, i) => ({ doc, score: rrfScores[i], rawBM25: rawSparse[i], rawDense: rawDense[i] }));
      } else if (mode === 'hybrid_fixed' || mode === 'hybrid_fixed_rerank') {
        const calSparse = minMaxNormalize(rawSparse);
        const calDense = minMaxNormalize(rawDense);
        alpha = 0.5;
        finalResults = sampleCorpus.map((doc, i) => ({
          doc,
          score: alpha * calSparse[i] + (1 - alpha) * calDense[i],
          rawBM25: rawSparse[i],
          rawDense: rawDense[i]
        }));

        if (mode === 'hybrid_fixed_rerank') reranked = true;
      } else if (mode === 'hybrid_calibrated' || mode === 'hybrid_calibrated_rerank') {
        const calSparse = cdfNormalize(rawSparse);
        const calDense = cdfNormalize(rawDense);
        hSparse = computeShannonEntropy(calSparse);
        hDense = computeShannonEntropy(calDense);

        alpha = hDense / (hDense + hSparse + 1e-8);

        finalResults = sampleCorpus.map((doc, i) => ({
          doc,
          score: alpha * calSparse[i] + (1 - alpha) * calDense[i],
          rawBM25: rawSparse[i],
          rawDense: rawDense[i]
        }));

        if (mode === 'hybrid_calibrated_rerank') reranked = true;
      }

      // Rerank simulation if required
      if (reranked) {
        finalResults.forEach(item => {
          const overlap = qTokens.filter(t => item.doc.text.toLowerCase().includes(t)).length;
          item.cross_encoder_score = Number((item.score * 2.0 + overlap * 0.8).toFixed(2));
        });
        finalResults.sort((a, b) => b.cross_encoder_score - a.cross_encoder_score);
      } else {
        finalResults.sort((a, b) => b.score - a.score);
      }

      const latency = (performance.now() - startTime).toFixed(1);

      // ── TELEMETRY BOX ──
      const statusColor = isLowConfidence ? 'var(--accent-rose)' : 'var(--accent-emerald)';
      const statusText = isLowConfidence ? '🚫 REJECTED — LOW CONFIDENCE' : '✅ CONFIDENT MATCH';
      const telemetryBorder = isLowConfidence ? '1px solid rgba(244, 63, 94, 0.5)' : '1px solid var(--border-color)';
      const telemetryBg = isLowConfidence ? 'rgba(244, 63, 94, 0.06)' : 'rgba(0, 0, 0, 0.4)';

      demoTelemetryBox.innerHTML = `
        <div style="display: flex; gap: 1.5rem; flex-wrap: wrap; padding: 0.75rem; background: ${telemetryBg}; border: ${telemetryBorder}; border-radius: 8px;">
          <div><strong style="color: var(--accent-cyan);">Mode:</strong> <code>${mode}</code></div>
          <div><strong style="color: var(--accent-amber);">Alpha (α):</strong> <code>${alpha.toFixed(3)}</code></div>
          <div><strong style="color: var(--accent-purple);">H_sparse:</strong> <code>${hSparse.toFixed(2)}</code></div>
          <div><strong style="color: var(--accent-purple);">H_dense:</strong> <code>${hDense.toFixed(2)}</code></div>
          <div><strong style="color: var(--accent-cyan);">Max Raw BM25:</strong> <code style="color: ${maxRawBM25 < BM25_MIN_SIGNAL ? 'var(--accent-rose)' : 'var(--accent-emerald)'}">${maxRawBM25.toFixed(3)}</code></div>
          <div><strong style="color: var(--accent-cyan);">Max Raw Dense:</strong> <code style="color: ${maxRawDense <= DENSE_BASELINE ? 'var(--accent-rose)' : 'var(--accent-emerald)'}">${maxRawDense.toFixed(3)}</code></div>
          <div><strong style="color: var(--accent-emerald);">Latency:</strong> <code>${latency} ms</code></div>
          <div><strong style="color: ${statusColor};">Status:</strong> <code style="color: ${statusColor}; font-weight: 800;">${statusText}</code></div>
        </div>
      `;

      // ── LOW CONFIDENCE: REJECT ALL RESULTS WITH RED HIGHLIGHT ──
      if (isLowConfidence) {
        const rejectionBanner = `
          <div style="margin-bottom: 1.25rem; padding: 1rem 1.25rem; background: rgba(244, 63, 94, 0.1); border: 1px solid rgba(244, 63, 94, 0.4); border-radius: 10px;">
            <div style="display: flex; align-items: center; gap: 0.75rem; color: #f43f5e; font-weight: 800; font-size: 1.1rem;">
              <span style="font-size: 1.3rem;">🚫</span> ALL RESULTS REJECTED — CONFIDENCE TOO LOW
            </div>
            <p style="margin-top: 0.6rem; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5;">
              The retrieval engine found <strong>no meaningful lexical overlap</strong> (Max BM25 = ${maxRawBM25.toFixed(3)} &lt; ${BM25_MIN_SIGNAL}) and <strong>no semantic similarity</strong> (Max Dense = ${maxRawDense.toFixed(3)} ≤ ${DENSE_BASELINE} baseline).
              <strong style="color: #f43f5e;">To prevent hallucination, the system will NOT augment or return these results, even though the retriever produced ranked output.</strong>
            </p>
          </div>
        `;

        const rejectedCards = finalResults.slice(0, 3).map((item) => `
          <div style="margin-bottom: 0.75rem; padding: 1rem 1.25rem; background: rgba(244, 63, 94, 0.04); border: 1px solid rgba(244, 63, 94, 0.3); border-left: 4px solid #f43f5e; border-radius: 8px; opacity: 0.6;">
            <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.5rem;">
              <h4 style="color: var(--text-muted); font-size: 0.95rem; text-decoration: line-through;">[${item.doc.id}] ${item.doc.title}</h4>
              <span style="font-family: var(--font-mono); font-size: 0.75rem; padding: 0.2rem 0.6rem; background: rgba(244, 63, 94, 0.15); color: #f43f5e; border-radius: 4px; font-weight: 700; white-space: nowrap;">
                ✗ NOT SELECTED — Raw BM25: ${item.rawBM25.toFixed(3)} | Raw Dense: ${item.rawDense.toFixed(3)}
              </span>
            </div>
            <p style="margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-muted); text-decoration: line-through;">${item.doc.text}</p>
          </div>
        `).join('');

        demoResultsContainer.innerHTML = rejectionBanner + rejectedCards;
        return;
      }

      // ── CONFIDENT: RENDER TOP RESULTS ──
      demoResultsContainer.innerHTML = finalResults.slice(0, 3).map((item, index) => `
        <div class="card" style="margin-bottom: 1rem; border-left: 4px solid ${index === 0 ? 'var(--accent-emerald)' : 'var(--border-color)'};">
          <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.5rem;">
            <h4 style="color: var(--text-primary); font-size: 1rem;">[${item.doc.id}] ${item.doc.title}</h4>
            <span class="function-tag" style="background: rgba(52, 211, 153, 0.15); font-weight: 700; color: var(--accent-emerald);">
              ✓ Score: ${item.score.toFixed(4)} ${item.cross_encoder_score !== undefined ? `| CrossEncoder: ${item.cross_encoder_score}` : ''}
            </span>
          </div>
          <p style="margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-secondary);">${item.doc.text}</p>
        </div>
      `).join('');
    });

    // Run initial search
    runDemoBtn.click();
  }
});